<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-table
      :data="menuList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称" sortable width="180"></el-table-column>
      <el-table-column prop="path" label="访问路径" sortable width="180"></el-table-column>
      <el-table-column prop="component" label="组件路径" sortable width="180"></el-table-column>
      <el-table-column prop="permissionValue" label="权限值"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
          <el-button
            v-if="(scope.row.level == 1 || scope.row.level == 2) && hasPerm('permission.add')"
            type="text"
            size="mini"
            @click="() => {dialogFormVisible = true, menu.pid = scope.row.id}"
          >添加菜单</el-button>
          <el-button
            v-if="scope.row.level == 3 &&  hasPerm('permission.add')"
            type="text"
            size="mini"
            @click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}"
          >添加功能</el-button>
          <el-button
            v-if="scope.row.level == 4 &&  hasPerm('permission.update')"
            type="text"
            size="mini"
            @click="() => updateFunction(scope.row)"
          >修改功能</el-button>
          <el-button
            v-if="scope.row.level != 4 &&  hasPerm('permission.update')"
            type="text"
            size="mini"
            @click="() => getById(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(scope.row)"
            v-if="hasPerm('permission.remove')"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
      <el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menu.name" />
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="menu.path" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="menu.component" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="append()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加功能的窗口 -->
    <el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
      <el-form
        ref="permission"
        :model="permission"
        :rules="permissionValidateRules"
        label-width="120px"
      >
        <el-form-item label="功能名称" prop="name">
          <el-input v-model="permission.name" />
        </el-form-item>
        <el-form-item label="访问路径">
          <el-input v-model="permission.path" />
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="permission.component" />
        </el-form-item>
        <el-form-item label="功能权限值" prop="permissionValue">
          <el-input v-model="permission.permissionValue" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="appendPermission()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import menu from "@/api/acl/menu";

const menuForm = {
  name: "",
  pid: 0,
  path: "",
  component: "",
  type: "1",
};
const perForm = {
  permissionValue: "",
  type: "2",
  name: "",
  path: "",
  component: "",
  pid: 0,
};

export default {
  data() {
    return {
      filterText: "",
      menuList: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      dialogFormValue: "添加菜单",
      dialogFormVisible: false,
      dialogPermissionVisible: false,
      menu: menuForm,
      permission: perForm,
      menuValidateRules: {
        name: [{ required: true, trigger: "blur", message: "菜单名必须输入" }],
        path: [
          { required: true, trigger: "blur", message: "菜单路径必须输入" },
        ],
        component: [
          { required: true, trigger: "blur", message: "组件名称必须输入" },
        ],
      },
      permissionValidateRules: {
        name: [
          { required: true, trigger: "blur", message: "功能名称必须输入" },
        ],
        permissionValue: [
          { required: true, trigger: "blur", message: "功能权限值必须输入" },
        ],
      },
    };
  },
  // 监听上面文本框搜索
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    },
  },

  created() {
    this.fetchNodeList();
  },

  methods: {
    fetchNodeList() {
      menu.getNestedTreeList().then((response) => {
        if (response.success === true) {
          this.menuList = response.data.children;
          console.log("=========" + this.menuList);
          //console.log(JSON.stringify(this.menuList));
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
    },
    remove(data) {
      console.log(data);

      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return menu.removeById(data.id);
        })
        .then(() => {
          this.fetchNodeList(); // 刷新列表
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch((response) => {
          // 失败
          if (response === "cancel") {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败",
            });
          }
        });
    },
    appendPermission() {
      this.$refs.permission.validate((valid) => {
        if (valid) {
          if (this.permission.id) {
            this.update(this.permission);
          } else {
            menu.saveLevelOne(this.permission).then((response) => {
              this.dialogPermissionVisible = false;
              this.$message({
                type: "success",
                message: "添加功能成功",
              });
              // 刷新页面
              this.fetchNodeList();
              this.menu = { ...menuForm };
              this.permission = { ...perForm };
            });
          }
        }
      });
    },
    appendLevelOne() {
      menu
        .saveLevelOne(this.menu)
        .then((response) => {
          this.dialogFormVisible = false;
          this.$message({
            type: "success",
            message: "添加一级菜单成功",
          });
          // 刷新页面
          this.fetchNodeList();
          this.menu = { ...menuForm };
          this.permission = { ...perForm };
        })
        .catch((response) => {
          // 你们写：判断点击取消清空一下
          this.dialogFormVisible = false;
          this.$message({
            type: "error",
            message: "添加一级菜单失败",
          });
          this.menu = { ...menuForm };
          this.permission = { ...perForm };
        });
    },

    append() {
      this.$refs.menu.validate((valid) => {
        if (valid) {
          if (!this.menu.id) {
            // 添加
            if (this.menu.pid == 0) {
              this.appendLevelOne(); // 一级分类的添加
            } else {
              this.appendLevelTwo(); // 二级分类的添加
            }
          } else {
            // 修改
            this.update(this.menu);
          }
        }
      });
    },

    update(obj) {
      debugger;
      menu.update(obj).then((response) => {
        this.dialogFormVisible = false;
        this.$message({
          type: "success",
          message: "修改成功",
        });
        // 刷新页面
        this.fetchNodeList();
        this.restData();
      });
    },
    appendLevelTwo() {
      menu
        .saveLevelOne(this.menu)
        .then((response) => {
          // 1、把文本框关
          this.dialogFormVisible = false;
          // 2、提示成功
          this.$message({
            type: "success",
            message: "添加二级分类成功",
          });
          // 3、刷新页面
          this.fetchNodeList();
          // 4、把menu清空
          this.menu = { ...menuForm };
          this.permission = { ...perForm };
        })
        .catch((response) => {
          // 1、把文本框关
          this.dialogFormVisible = false;
          // 2、提示成功
          this.$message({
            type: "error",
            message: "添加二级分类失败",
          });
          // 3、把menu清空
          this.menu = { ...menuForm };
          this.permission = { ...perForm };
        });
    },
    getById(data) {
      this.dialogFormVisible = true;
      this.menu = data;
    },
    updateFunction(data) {
      this.dialogPermissionVisible = true;
      this.permission = data;
    },
    restData() {
      this.dialogPermissionVisible = false;
      this.dialogFormVisible = false;
      this.menu = { ...menuForm };
      this.permission = { ...perForm };
    },
  },
};
</script>
